<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        margin: 0;
        min-width: 490px;
    }

    h1 {
        text-align: center;
        text-decoration: line-through;
        color: gray;
    }

    h3 {
        text-align: right;
    }

    #p1 {
        text-align: center;

    }

    #p1 a:hover {
        text-decoration: none;
        color: red;
    }

    #p2 {
        text-indent: 30px;
        text-align: justify;
        /* text-shadow: 0.5px gray; */
        line-height: 30px;
        font-family: "Times New Roman";

    }

    #p3 {
        position: sticky;
        top: 53px;
        text-align: center;
        padding-top: 26px;
        padding-bottom: 21px;
        background-color: antiquewhite;

    }

    nav ul li {
        list-style: none;
        display: inline;
        margin-left: 20px;
    }

    a {
        text-decoration: none;
    }

    nav {
        position: sticky;
        top: 0px;
        display: flex;
        background-color: rgb(176, 163, 224);
        justify-content: space-around;
        min-width: 490px;
    }

    #block {
        text-align: center;
    }

    #block span {

        display: block;
    }

    #left ul li {
        padding: 10px;
        width: 100px;
        background-color: #f1f1f1;

    }

    #left ul li:hover {
        background-color: rgb(151, 149, 149);
        color: white;
    }

    #left ul li a {
        color: black;
    }

    #box {
        min-width: none;
        margin: 0 auto;
        background-color: #f4f2f2;
        margin-top: 30px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
    }

    #box div {
        padding: 5px 10px;
        text-align: center;
        border: 1px solid lightslategray;
    }
    #box div:hover img{
        opacity:0.4;
        cursor: pointer;
    }
    #box div:hover{
        border: 1px solid #ca6f9a;
    }
</style>

<body>
    <nav>
        <div style="padding-top: 16px;">个人博客平台管理</div>
        <ul>
            <a href="#">
                <li>首页</li>
            </a>
            <a href="#">
                <li>个人简历</li>
            </a>
            <a href="#hello">
                <li>关于我们</li>
            </a>
            <a href="#">
                <li>欢迎加入</li>
            </a>
        </ul>
    </nav>
    <h1>关于蚊子</h1>
    <h3>时间:2022年4月5日15:04:35</h3>
    <p id="p1"><a href="#hello">关于我们的介绍</a></p>
    <p id="p2" style="padding: 0px 20px;">
        蚊（mosquito）属于双翅目（Diptera）、蚊科（Culicidae），又称“蚊子”，是最重要的医学昆虫类群。蚊分布很广，种类很多，迄今为止全世界已记录蚊虫共3亚科（巨蚊亚科、按蚊亚科、库蚊亚科），35属，3600多种和亚种。中国已发现370余种，其中按蚊、库蚊、伊蚊3个属的蚊种超过半数。
    </p>
    <p id="p3">关于padding,定义元素边框与元素内容之间的空间 这是一个粘性定位position: sticky;</p>
    <div id="block">
        <span style="color: red; font-size: 20px;">使用 display: block;将内联元素 转变为块级元素</span>
        <span>所谓"单线程"，就是指一次只能完成一件任务</span>
        <span>Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）</span>
    </div>

    <div id="container" style="background-color: #f8f8f8; height: 200px; margin-top: 30px;background-color: #f8f8f8;
    height: 164px;
    margin-top: 30px;">
        <div id="left" style="float: left; border-right: 1px solid lightgrey;">
            <ul style="list-style: none; margin: 0; padding: 0;">
                <li><a href="#html5"> html5</a></li>
                <li><a href="#css3"> css3</a></li>
                <li><a href="#javascript"> javascript</a></li>
                <li><a href="#vue2"> vue2</a></li>
            </ul>
        </div>
        <div id="right" style="height: 163px; overflow-y: scroll;">
            <h2 style="text-align: center;"><a id="html5">HTML5</a></h2>
            <p style="text-indent:20px;padding: 0px 20px">
                超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

                您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

                在本教程中，您将学习如何使用 HTML 来创建站点。

                HTML 很容易学习！相信您能很快学会它！
            </p>
            <h2 style="text-align: center;"><a id="css3">css3</a></h2>
            <p style="text-indent:20px;padding: 0px 20px">
                什么是 CSS?
                CSS 指层叠样式表 (Cascading Style Sheets)
                样式定义如何显示 HTML 元素
                样式通常存储在样式表中
                把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
                外部样式表可以极大提高工作效率
                外部样式表通常存储在 CSS 文件中
                多个样式定义可层叠为一个

            </p>
            <h2 style="text-align: center;"><a id="javascript">javascript</a></h2>
            <p style="text-indent:20px;padding: 0px 20px">
                JavaScript 是 Web 的编程语言。

                所有现代的 HTML 页面都使用 JavaScript。

                JavaScript 非常容易学。

                本教程将教你学习从初级到高级 JavaScript 知识。
            </p>
            <h2 style="text-align: center;"><a id="vue2">vue2</a></h2>
            <p style="text-indent:20px;padding: 0px 20px">
                Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具
                devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
            </p>
        </div>
    </div>

    <a id="hello">
        <h2 style="text-align: center; color: red;">About Us</h2>
        <div id="box">
            <div>
                <img style="width: 400px;" src="https://static.runoob.com/images/demo/demo1.jpg" alt="" srcset="">
                <p>这是一张图片</p>
            </div>
            <div>
                <img style="    width: 400px;" src="https://static.runoob.com/images/demo/demo1.jpg" alt="" srcset="">
                <p>这是一张图片</p>
            </div>
            <div>
                <img style="    width: 400px;" src="https://static.runoob.com/images/demo/demo1.jpg" alt="" srcset="">
                <p>这是一张图片</p>
            </div>
            <div>
                <img style="    width: 400px;" src="https://static.runoob.com/images/demo/demo1.jpg" alt="" srcset="">
                <p>这是一张图片</p>
            </div>
            <div>
                <img style="    width: 400px;" src="https://static.runoob.com/images/demo/demo1.jpg" alt="" srcset="">
                <p>这是一张图片</p>
            </div>
            <div>
                <img style="    width: 400px;" src="https://static.runoob.com/images/demo/demo1.jpg" alt="" srcset="">
                <p>这是一张图片</p>
            </div>
        </div>
    </a>

</body>

</html>